import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Button, Modal, notification} from "antd";
import {hideModify, query, update} from "./actions";
import FormEditor from '../../components/FormEditor';
import {DATE_FORMAT} from "../../lib/func";
import {getPrincipal} from "../../lib/identity";

class ModifyModal extends PureComponent {

    handleModify = () => {
        const formEditor = this.formEditor.props.form;
        if (formEditor) {
            const {dispatch, page, pageSize, model} = this.props;
            formEditor.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    if (values.dateRange && values.dateRange.length > 1) {
                        values.startTime = values.dateRange[0].format(DATE_FORMAT);
                        values.endTime = values.dateRange[1].format(DATE_FORMAT);
                    }
                    delete values.dateRange;
                    dispatch(update({...model, ...values, "status": "已发布", "opId": getPrincipal().id})).then(action => {
                        if (action.error !== true) {
                            formEditor.resetFields();
                            dispatch(hideModify());
                            dispatch(query({page, pageSize}));
                            notification.success({
                                message: '修改成功'
                            });
                        }
                    });
                }
            });
        }
    };

    handleModify2 = () => {
        const formEditor = this.formEditor.props.form;
        if (formEditor) {
            const {dispatch, page, pageSize, model} = this.props;
            formEditor.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    dispatch(update({...model, ...values, "status": "暂存", "opId": getPrincipal().id})).then(action => {
                        if (action.error !== true) {
                            formEditor.resetFields();
                            dispatch(hideModify());
                            dispatch(query({page, pageSize}));
                            notification.success({
                                message: '修改成功'
                            });
                        }
                    });
                }
            });
        }
    };
    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideModify());
    };


    render() {
        const {loading, visible, model, organizations} = this.props;
        if (model.startTime && model.endTime) {
            model.dateRange1 = model.startTime.substring(0, 10) + "至" + model.endTime.substring(0, 10)
        }
        const schema = [
            {
                title: '基础信息',
                fields: [
                    {
                        field: 'title',
                        title: '标题',
                        type: 'text',
                        fieldOptions: {
                            rules: [{required: true, message: '请输入标题'}]
                        }
                    }, {
                        field: 'description',
                        title: '内容',
                        type: 'textArea',
                        fieldOptions: {
                            rules: [{required: true, message: '请输入内容'}]
                        }
                    }, {
                        field: 'dateRange',
                        title: '更新公告时间',
                        type: 'dateRangePicker'
                    }, {
                        field: 'dateRange1',
                        title: '公告时间',
                        readonly: true
                    },
                    {
                        field: 'organizationIds',
                        title: '可见范围',
                        type: 'treeSelector',
                        controlProps: {
                            treeData: organizations,
                            labelField: "name",
                            valueField: "id",
                            treeCheckable: true
                        },
                        fieldOptions: {
                            rules: [{required: true, message: '请选择机构'}]
                        }
                    }
                ]
            }];

        return (
            <Modal
                title="修改"
                visible={visible}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                footer={null}
                width="40%"
            >
                <FormEditor
                    schema={schema}
                    column={1}
                    defaultReadonly={false}
                    showActionBar={false}
                    defaultValues={model}
                    wrappedComponentRef={inst => (this.formEditor = inst)}
                />
                <div className="actions">
                    <Button onClick={this.handleModify2}>暂存</Button>
                    <Button onClick={this.handleModify}>发布</Button>
                </div>
            </Modal>

        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.notice.modify,
        organizations: state.home.organizations
    };
};

export default connect(mapStateToProps)(ModifyModal);
